
<!--



表格模板

将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中

-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }




    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;


    }
</style>

<body>

<div id="app">

        <el-row class="demo-autocomplete">
            <el-col :span="6">
                渠道:
                <el-input v-model="input1" style="width:150px"  placeholder="请输入渠道"></el-input>
            </el-col>
            <el-col :span="2">选择日期</el-col>
            <el-col :span="6">
                <el-date-picker
                        v-model="value1"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
                <el-col :span="6">
                    <!--   空栏防止输入框往有边跑-->
                </el-col>
            </el-col>
            <br/>
            <el-col :span="6">
                <el-button type="primary" icon="el-icon-search" size="small" @click="getData()">查询</el-button>
            </el-col>
        </el-row>
        <br/>




    <!--table 模板 ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    fixed
                    prop="channel"
                    label="渠道名称"
                    width="100">
            </el-table-column>

                <el-table-column
                        :formatter="dataFormat"
                        prop="registerDate"
                        label="注册日期"
                        width="100">

                </el-table-column>
                <el-table-column
                        prop="registeredUsersNums"
                        label="注册用户数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="firstApplyNums"
                        label="首次申请数"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="submitAuditNums"
                        label="提交审核数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="auditPassNums"
                        label="审核通过数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="loanNums"
                        label="放款数"
                        width="100">
                </el-table-column>

                <el-table-column
                        prop="loanOrderAmount"
                        label="放款订单金额"
                        width="100">
                </el-table-column>

            <el-table-column
                    label="操作"
                    width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </template>
</div>
</body>


<script type="text/javascript" th:inline="javascript">




    var demo = new Vue({

        el: "#app", //绑定的div

        data() {
            return {
                restaurants: [],
                input1: '',
                value1: '',

                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:1,
            }
        },

        methods: {
            //时间格式转换
            dataFormat: function (row, column) {
                //获取表格数据
                let data = row[column.property]
                if (data === null) {
                    return ''
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            },

            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("usercon/page",{
                        params:{
                            limit:10,
                            pageNum:this.currentPage,
                            channel:this.input1,
                            registerDate:this.value1
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows
                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total
                })
            },
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            loadAll() {
                return [
                    {"value": "阳阳麻辣烫", "address": "天山西路389号"},
                    {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
                ];
            },
            handleSelect(item) {
                console.log(item);
            },

             handleClick:function(val){

                 window.location.href = 'usercondet'+'?aaa='+encodeURI(val.channel)

            }
        },


        created:function(){

            this.getData()

        },
        mounted() {
            this.restaurants = this.loadAll();
        }

    })

    //分页还没写


</script>
</html>